/*!
 * Ext JS Library 3.4.0
 * Copyright(c) 2006-2011 Sencha Inc.
 * licensing@sencha.com
 * http://www.sencha.com/license
 */
Ext.chart.Chart.CHART_URL = 'charts.swf';

function el(tid) {return document.getElementById(tid);}
function IO(U, V) {//LA MOD String Version. A tiny ajax library.  by, DanDavis
    var X = !window.XMLHttpRequest ? new ActiveXObject('Microsoft.XMLHTTP') : new XMLHttpRequest();
    X.open(V ? 'PUT' : 'GET', U, false );
    X.setRequestHeader('Content-Type', 'text/html')
    X.send(V ? V : '');
    return X.responseText;
}       

var csvData;
var store2;

var xTitle;
var yTitle;
var titleIdx = true;

var tempYear = "0";

/*
var tempMonth1 = 0;
var tempMonth2 = 0;
var tempMonth3 = 0;
var tempMonth4 = 0;
var tempMonth5 = 0;
var tempMonth6 = 0;
var tempMonth7 = 0;
var tempMonth8 = 0;
var tempMonth9 = 0;
var tempMonth10 =0;
var tempMonth11 =0;
var tempMonth12 =0;
*/

var tempMonth = new Array();
var mCnt = new Array();
// 초기화
for(var i=0; i<12; i++){
	tempMonth[i] = 0;
	mCnt[i] = 0;
}


/*
var m1Cnt=0;
var m2Cnt=0;
var m3Cnt=0;
var m4Cnt=0;
var m5Cnt=0;
var m6Cnt=0;
var m7Cnt=0;
var m8Cnt=0;
var m9Cnt=0;
var m10Cnt=0;
var m11Cnt=0;
var m12Cnt=0;
*/

var isFirst=true;

var generatedData = [];

// csv 파일 읽어서 사용하기
function generateData2(dataStr){
	//var data = [];
	generatedData = [];		// 초기화
	var tempA ;	// 동시에 두개씩 넣기 위함--> 3개 시도.  년
	var tempB ;	// 월
	var tempC ;	// 카운트
	var cntIdx = 0; // 왼쪽 , 오른쪽 구분 위함  1,0 --> 3개로 .

	var strData = dataStr;	
	var strDelimiter = ",";
	// Create a regular expression to parse the CSV values.
	var objPattern = new RegExp(
		(
			// Delimiters.
			"(\\" + strDelimiter + "|\\r?\\n|\\r|^)" +

			// Quoted fields.
			"(?:\"([^\"]*(?:\"\"[^\"]*)*)\"|" +

			// Standard fields.
			"([^\"\\" + strDelimiter + "\\r\\n]*))"
		),
		"gi"
	);

	var arrMatches = null;

	while (arrMatches = objPattern.exec( strData )){
			var strMatchedDelimiter = arrMatches[ 1 ];
			if (arrMatches[ 2 ]){
					var strMatchedValue = arrMatches[ 2 ].replace(
							new RegExp( "\"\"", "g" ),
							"\""
							);
			} else {
					var strMatchedValue = arrMatches[ 3 ];
			}			
			if(cntIdx==0){	// 시작 - 읽은 값을 저장을 한다.
				tempA = strMatchedValue;
			}else if(cntIdx==1){
				tempB = strMatchedValue;	
			}else if(cntIdx==2){			// 두번째 - 읽은 값을 저장하고 저장된 값 두개를 데이터에 밀어 넣는다.
				tempC = strMatchedValue;
				//generatedData.push([tempA,tempB,tempC]);		// [ ] 주의. 없으면 데이터 망가짐.				
				// 값 두개 저장했으니 데이터에 푸시한다.
				if(titleIdx){		// 가장 먼저 것 두개는 타이틀로 뺀다.??
					xTitle = tempA;
					tempYear = tempA;
					xsTitle = tempB;
					yTitle = tempC;
					titleIdx = false;
					//alert('xTitle:'+xTitle+'//tempYear:'+tempYear+'//xsTitle:'+xsTitle+'//yTitle:'+yTitle);
				}else{
	//				년도는 의미없고. 데이터 나오면 월만 보고 다 더한다. 이때 카운트를 올린다. 푸시는 하지 않는다. 나중에 밖에서 할것.
					
					/*
					if(tempA!=tempYear){	// 같은 년도일때 -> 임시로 계속 저장 //// // 년도가 바뀌면 임시저장을 모두 푸쉬.
						// push push ...

						if(isFirst){
							isFirst = false;
						}else{
							generatedData.push([tempA,tempMonth1,tempMonth2,tempMonth3,tempMonth4,tempMonth5,tempMonth6,tempMonth7,tempMonth8,tempMonth9,tempMonth10,tempMonth11,tempMonth12]);
							//alert('push:'+tempA+'/'+tempMonth1+'/'+tempMonth2+'/'+tempMonth3+'/'+tempMonth4+'/'+tempMonth5+'/'+tempMonth6+'/'+tempMonth7+'/'+tempMonth8+'/'+tempMonth9+'/'+tempMonth10+'/'+tempMonth11+'/'+tempMonth12);
						}
						// 저장후 임시값 초기화
						tempMonth1="0";tempMonth2="0";tempMonth3="0";tempMonth4="0";tempMonth5="0";tempMonth6="0";
						tempMonth7="0";tempMonth8="0";tempMonth9="0";tempMonth10="0";tempMonth11="0";tempMonth12="0";

						tempYear = tempA;	// 년도 교환.
					}*/

					//alert(tempB);
					// 데이터 저장.
					if(tempB=='1'){		// 1월
						tempMonth[0] = tempMonth[0] + (tempC*1);		// 문자 데이터이기 때문에 숫자로 바꿔서 더함.
						mCnt[0]=mCnt[0]+1;
					}else if(tempB=='2'){	// 2월
						tempMonth[1] = tempMonth[1] + (tempC*1);	
						mCnt[1]=mCnt[1]+1;
					}else if(tempB=='3'){	// 3월
						tempMonth[2] = tempMonth[2] + (tempC*1);
						mCnt[2]=mCnt[2]+1;
					}else if(tempB=='4'){	// 4월
						tempMonth[3] = tempMonth[3] + (tempC*1);
						mCnt[3]=mCnt[3]+1;
					}else if(tempB=='5'){	// ...
						tempMonth[4] = tempMonth[4] + (tempC*1);
						mCnt[4]=mCnt[4]+1;
					}else if(tempB=='6'){
						tempMonth[5] = tempMonth[5] + (tempC*1);	
						mCnt[5]=mCnt[5]+1;
					}else if(tempB=='7'){
						tempMonth[6] = tempMonth[6] + (tempC*1);
						mCnt[6]=mCnt[6]+1;
					}else if(tempB=='8'){
						tempMonth[7] = tempMonth[7] + (tempC*1);
						mCnt[7]=mCnt[7]+1;
					}else if(tempB=='9'){
						tempMonth[8] = tempMonth[8] + (tempC*1);
						mCnt[8]=mCnt[8]+1;
					}else if(tempB=='10'){
						tempMonth[9] = tempMonth[9] + (tempC*1);
						mCnt[9]=mCnt[9]+1;
					}else if(tempB=='11'){
						tempMonth[10] = tempMonth[10] + (tempC*1);	
						mCnt[10]=mCnt[10]+1;
					}else if(tempB=='12'){
						tempMonth[11] = tempMonth[11] + (tempC*1);
						mCnt[11]=mCnt[11]+1;
					}
					//data.push([tempA,tempB]);		// [ ] 주의. 없으면 데이터 망가짐.
					//generatedData.push([tempA,tempB,tempC]);		// [ ] 주의. 없으면 데이터 망가짐.
				}		
			}
			cntIdx = 1 + cntIdx;		// 토글 변경. 왼쪽/오른쪽--> 3개짜리
			if(cntIdx==3){
				cntIdx=0;
			}
	}
	titleIdx = true;
	// 데이터 평균.
	for(var i=0; i<12; i++){
		//alert(tempMonth[i]+"/"+mCnt[i]);
		tempMonth[i] = Math.round(tempMonth[i]/mCnt[i]);	// 반올림 기능 		
	}
	// 데이터 저장
	for(var i=0; i<12; i++){
		generatedData.push([i+1+'월',tempMonth[i]]);			     
	}

    //return data;	// 저장된 데이터를 반환한다.


	return true;
}

function chart1() {
	//alert(generatedData.length);
	var chartWidth = 400 + ((generatedData.length)*10);
	if(chartWidth>1200){	// 최대 사이즈
		chartWidth = 1200;
	}
	if(initChart()){
		new Ext.Panel({
		id:'p1',
		width: chartWidth,		// 데이터 많아서 좌우 길게 잡음   254 -> 400 + 2540
		height: 600,		// 높이
		renderTo: document.body,
		title: 'Column Chart',		// 상단 타이틀
		items: {
			xtype: 'columnchart',
			store: store2,
			yField: yTitle,	// 'count',
			url: 'charts.swf',
			xField: xTitle,		// 'year',
			xAxis: new Ext.chart.CategoryAxis({
				title: xsTitle,		// 'year',		// X 축 이름
			}),
			yAxis: new Ext.chart.NumericAxis({
				title: yTitle,	// 'count',		// Y 축 이름
			})/*,
			extraStyle: {
			   xAxis: {
					labelRotation: -90		
				}
			}*/
		}
	});
	}
	var w = Ext.getCmp('p1');
            w.getEl().mask('loading...','x-mask-loading');
			// //
	(function(){ w.getEl().unmask(); }).defer(1000, this);
	
}  
function chart2() {
	
	var chartWidth = 400 + ((generatedData.length)*4);
	if(chartWidth>800){	// 최대 사이즈
		chartWidth = 800;
	}
	if(initChart()){
	new Ext.Panel({
		id:'p2',
        width: chartWidth,
        height: chartWidth,
        title: 'Pie Chart',
        renderTo: document.body,
        items: {
            //store: store,
			store: store2,
            xtype: 'piechart',

			categoryField: xTitle,		// 'year',
			dataField: yTitle,     // 'count',
//            dataField: 'total',
//            categoryField: 'season',

            //extra styles get applied to the chart defaults
            extraStyle:
            {
                legend:
                {
                    display: 'bottom',
                    padding: 5,
                    font:
                    {
                        family: 'Tahoma',
                        size: 13
                    }
                }
            }
        }
    });
	}
	var w = Ext.getCmp('p2');
            w.getEl().mask('loading...','x-mask-loading');
			// //
	(function(){ w.getEl().unmask(); }).defer(1000, this);
	
}  
function chart3() {

	var chartWidth = 300 + ((generatedData.length)*10);
	if(chartWidth>800){	// 최대 사이즈
		chartWidth = 800;
	}
	if(initChart()){
   new Ext.Panel({
	   id:'p3',
        width: 800,
        height: chartWidth,
        renderTo: document.body,
        title: 'Bar Chart',
        items: {
            xtype: 'stackedbarchart',
            store: store2,
            yField: xTitle,          // 'year',
			yAxis: new Ext.chart.CategoryAxis({
				title: xsTitle,		// 'year',		// X 축 이름
			}),
			xAxis: new Ext.chart.NumericAxis({
				title: yTitle,	// 'count',		// Y 축 이름
			}),
            
            series: [{
                xField: yTitle,     // 'count',
                displayName: yTitle,     // 'count',
            }]
        }
    });
	}
	var w = Ext.getCmp('p3');
            w.getEl().mask('loading...','x-mask-loading');
			// //
	(function(){ w.getEl().unmask(); }).defer(1000, this);
	
}  

function chart4() {
	var chartWidth = 300 + ((generatedData.length)*10);
	if(chartWidth>1200){	// 최대 사이즈
		chartWidth = 1200;
	}
	if(initChart()){
		//alert('?');
	new Ext.Panel({
		id:'p4',
        title: 'linechart (No styling)',
        renderTo: document.body,
        width:chartWidth,
        height:500,
        layout:'fit',
        items: {
            xtype: 'linechart',
            //store: store,
			store: store2,
/*
			axes:[{
				type:'Numeric',
				position:'left',
				fields:[xTitle]
			}, {
				type:'Category',
				position:'bottom',
				fields:['m1','m2','m3','m4','m5','m6','m7','m8','m9','m10','m11','m12']
			}],
			
			series:[{
				type:'line',
				yField:['m1','m2','m3','m4','m5','m6','m7','m8','m9','m10','m11','m12'],		["m1","m2","m3","m4","m5","m6","m7","m8","m9","m10","m11","m12"]
				xField: xTitle
			}],*/
			// 값.
			xField: xTitle,	
			yField: yTitle, 
			/*
			listeners: {
				itemclick: function(o){
					var rec = store.getAt(o.index);
					Ext.example.msg('Item Selected', 'You chose {0}.', rec.get('name'));
				}
			},
			*/
			xAxis: new Ext.chart.CategoryAxis({	// 축이름. 
				title: xsTitle,		// 'year',	xTitle	// X 축 이름 xTitle --> month  xsTitle
			}),
			yAxis: new Ext.chart.NumericAxis({
				title: yTitle,	// 'count',		// Y 축 이름
			})/*,
			
            extraStyle: {
               xAxis: {
                    labelRotation: -90		
                }
            }*/
			
        }
    });
	/*	
    // extra simple
    new Ext.Panel({
        iconCls:'chart',
        title: 'linechart (Simple styling)',
        frame:true,
        renderTo: document.body,
        width:chartWidth,
        height:500,
        layout:'fit',

        items: {
            xtype: 'linechart',
            store: store2,		// store: store,
            url: 'charts.swf',
            xField: xTitle,          // 'year',		// xField: 'name',
            yField: yTitle,     // 'count',		//  yField: 'visits',
            yAxis: new Ext.chart.NumericAxis({
                displayName: yTitle,     // 'count',
                labelRenderer : Ext.util.Format.numberRenderer('0,0')
            }),
            tipRenderer : function(chart, record){
                //return Ext.util.Format.number(record.data.count, '0,0') + ' '+ yTitle+' in ' + record.data.year;
				return Ext.util.Format.number(record.data.yTitle, '0,0') + ' '+ yTitle+' in ' + record.data.xTitle;
            },
            extraStyle: {
               xAxis: {
                    labelRotation: -90		
                }
            }
        }
    });
*/

/*
    // more complex with a custom look
    new Ext.Panel({
		id:'p4',
        iconCls:'chart',
        title: 'columnchart+line  (Full styling)',
        frame:true,
        renderTo: document.body,
        width:chartWidth,
        height:500,
        layout:'fit',

        items: {
            xtype: 'columnchart',
            store: store2,		//store: store,	
            url:'charts.swf',
            xField: xTitle,          // 'year',		// xField: 'name',
            yAxis: new Ext.chart.NumericAxis({
                displayName: yTitle//,     // 'count',		// displayName: 'Visits',		
                //labelRenderer : Ext.util.Format.numberRenderer('0,0')
            }),
            chartStyle: {
                padding: 10,
                animationEnabled: true,
                font: {
                    name: 'Tahoma',
                    color: 0x444444,
                    size: 11
                },
                dataTip: {
                    padding: 5,
                    border: {
                        color: 0x99bbe8,
                        size:1
                    },
                    background: {
                        color: 0xDAE7F6,
                        alpha: .9
                    },
                    font: {
                        name: 'Tahoma',
                        color: 0x15428B,
                        size: 10,
                        bold: true
                    }
                },
                xAxis: {
                    color: 0x69aBc8,
                    majorTicks: {color: 0x69aBc8, length: 4},
                    minorTicks: {color: 0x69aBc8, length: 2},
                    majorGridLines: {size: 1, color: 0xeeeeee}
                },
                yAxis: {
                    color: 0x69aBc8,
                    majorTicks: {color: 0x69aBc8, length: 4},
                    minorTicks: {color: 0x69aBc8, length: 2},
                    majorGridLines: {size: 1, color: 0xdfe8f6}
                }
            },
			xAxis: new Ext.chart.CategoryAxis({
				title: xTitle,		// 'year',		// X 축 이름
			}),
			yAxis: new Ext.chart.NumericAxis({
				title: yTitle,	// 'count',		// Y 축 이름
			}),
            series: [{
                type: 'column',
                displayName: yTitle,     // 'count',
                yField: yTitle,     // 'count',
                style: {
                    image:'bar.gif',
                    mode: 'stretch',
                    color:0x99BBE8
                }
            },{
                type:'line',
                displayName: yTitle,     // 'count',
                yField: yTitle,     // 'count',
                style: {
                    color: 0x15428B
                }
            }],
            extraStyle: {
               xAxis: {
                    labelRotation: -90		
                }
            }
        }
    });
*/

	}
	

	var w = Ext.getCmp('p4');
            w.getEl().mask('loading...','x-mask-loading');
			// //
	(function(){ w.getEl().unmask(); }).defer(1000, this);
}  

function checkFileLoaded(){
	if(csvData==null || csvData.length<1){
		return false;
	}
	return true;
}

function initChart(){
	if(checkFileLoaded()){
		var docBody = document.getElementById('docBody');
		var cont  = document.getElementById('container');
		
		while(cont.nextSibling){
			docBody.removeChild(cont.nextSibling);
		}
		return true;
	}else{
		alert('오픈된 CSV 파일이 없습니다.');
		return false;
	}
}

function otherCSVLoad(dataStr){
	loading_show();
	//alert('1');
	//alert(dataStr);
	 csvData = dataStr;
	if(generateData2(dataStr)){
		// 데이터 저장소 - csv 파일 읽어서 보여줄때..   year 와 count 를 축으로 함.  
			// 파일에서 능동적으로 읽어서 첫번째, 두번째 값을 축으로 지정하는 것 생각해볼 수 있음..  파일 읽고 난 뒤에 처음 두 값을 축 변수로 지정... 아래에서 안될 것 같음.
		store2 = new Ext.data.ArrayStore({
//			fields: [xTitle, yTitle],	// ['month', 'count'],		--> 월별로 하고 대신 년다 합쳐서 평균낼것임.
			fields: [xTitle, yTitle],
			data: generatedData
		});
	}
	loading_hide();
}


function loading_show(){
	document.getElementById("status").style.display = 'block';
}
function loading_hide(){
	document.getElementById("status").style.display = 'none';
}

